import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, BookOpen, Code, Coffee } from 'lucide-react';
import SEOHead from '../components/SEOHead';

const Home = () => {
  const [isVisible, setIsVisible] = useState(false);
  
  const features = [
    {
      icon: BookOpen,
      title: '技术分享',
      description: '分享前端开发、后端技术、架构设计等技术文章'
    },
    {
      icon: Code,
      title: '项目展示',
      description: '展示个人项目和开源贡献，记录技术成长历程'
    },
    {
      icon: Coffee,
      title: '生活感悟',
      description: '记录生活点滴，分享读书心得和人生感悟'
    }
  ];

  useEffect(() => {
    setIsVisible(true);
  }, []);

  return (
    <>
      <SEOHead 
        title="首页"
        description="专业的技术博客，分享前端开发、后端技术、系统架构、DevOps等领域的深度文章和实践经验。涵盖React、Vue、Node.js、Java、Docker、Kubernetes等技术栈。"
        keywords="技术博客,前端开发,后端开发,React,Vue,Node.js,Java,Docker,Kubernetes,系统架构,微服务,DevOps"
      />
      <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative overflow-hidden" role="banner">
        <div 
          className="absolute inset-0 opacity-10 animate-pulse"
          style={{ background: 'var(--gradient-primary)' }}
        ></div>
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
          <div className="text-center">
            <h1 className={`text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6 text-shadow ${isVisible ? 'animate-fade-in-up' : 'opacity-0'}`}>
              欢迎来到我的
              <span className="text-gradient-animated"> 技术博客</span>
            </h1>
            <p className={`text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto ${isVisible ? 'animate-fade-in-up animate-delay-200' : 'opacity-0'}`}>
              在这里，我分享技术见解、项目经验和生活感悟。
              让我们一起探索技术的无限可能，记录成长的每一个瞬间。
            </p>
            <div className={`flex flex-col sm:flex-row gap-4 justify-center ${isVisible ? 'animate-fade-in-up animate-delay-300' : 'opacity-0'}`}>
              <Link
                to="/blog"
                className="inline-flex items-center px-8 py-3 border border-transparent text-base font-medium rounded-lg text-white theme-gradient btn-animated hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl group"
              >
                开始阅读
                <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
              </Link>
              <Link
                to="/about"
                className="inline-flex items-center px-8 py-3 border border-gray-300 dark:border-gray-600 text-base font-medium rounded-lg text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl"
              >
                了解更多
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 bg-white dark:bg-gray-800" role="main">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className={`text-center mb-16 ${isVisible ? 'animate-fade-in-up animate-delay-500' : 'opacity-0'}`}>
            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
              博客特色
            </h2>
            <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              专注于高质量的内容创作，为读者提供有价值的技术分享和人生感悟
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <div
                key={index}
                className={`text-center p-8 rounded-xl bg-gray-50 dark:bg-gray-700 card-animated hover:shadow-xl transition-all duration-300 group ${isVisible ? 'animate-fade-in-up' : 'opacity-0'}`}
                style={{ animationDelay: `${0.6 + index * 0.1}s` }}
              >
                <div className="inline-flex items-center justify-center w-16 h-16 theme-gradient rounded-full mb-6 group-hover:animate-bounce animate-float">
                  <feature.icon className="h-8 w-8 text-white" />
                </div>
                <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 group-hover:theme-color transition-colors">
                  {feature.title}
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 theme-gradient relative overflow-hidden" role="complementary">
        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-pulse"></div>
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className={`text-3xl font-bold text-white mb-4 ${isVisible ? 'animate-fade-in-up animate-delay-500' : 'opacity-0'}`}>
            开始你的阅读之旅
          </h2>
          <p className={`text-xl mb-8 max-w-2xl mx-auto ${isVisible ? 'animate-fade-in-up animate-delay-200' : 'opacity-0'}`} style={{ color: 'rgba(255, 255, 255, 0.8)' }}>
            探索最新的技术文章，获取实用的开发经验，一起成长进步
          </p>
          <Link
            to="/blog"
            className={`inline-flex items-center px-8 py-3 border-2 border-white text-base font-medium rounded-lg text-white hover:bg-white btn-animated hover:scale-105 transition-all duration-300 group ${isVisible ? 'animate-fade-in-up animate-delay-300' : 'opacity-0'}`}
            style={{
              '--hover-text-color': 'var(--color-primary)'
            }}
            onMouseEnter={(e) => {
              e.target.style.color = 'var(--color-primary)';
            }}
            onMouseLeave={(e) => {
              e.target.style.color = 'white';
            }}
          >
            查看所有文章
            <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
          </Link>
        </div>
      </section>
      </div>
    </>
  );
};

export default Home;
